import "../../assets/styles/simple.scss"
import { Drawer } from "antd";


/**
 * 
 * @param {*id 地图绑定标签Id} param0 
 * @returns 
 */
export const BMap = ({ id }) => {
    return (
        <div id={id} className={'map-2d'}>
            <div id="mapContainer"></div>
        </div>
    )
}



/**
 * @description 两侧抽屉样组件
 */

export const LgDrawer = ({ visible, left, right }) => {
    return (
        <>
            <Drawer
                placement="left"
                closable={false}
                maskClosable={false}
                mask={false}
                getContainer={false}
                className={"by-drawer by-drawer--left"}
                visible={visible}
                style={{ width: '534px' }}
            >
                {left}
            </Drawer>
            <Drawer
                placement="right"
                closable={false}
                maskClosable={false}
                mask={false}
                getContainer={false}
                className={"by-drawer by-drawer--right"}
                visible={visible}
                style={right ? {} : { pointerEvents: "none", width: '534px' }}

            >
                {right}
            </Drawer>
        </>
    )
}

export const FooterCenter = ({ centerImg }) => {
    return (
        <div
            style={{
                position: "absolute",
                left: "42%",
                bottom: "34px"
            }}
        >
            <img
                style={{ width: "90%" }}
                src={centerImg} alt=""
            />

        </div>
    )
}


/**
 * 平面地图左边操作组件
 * @param {*} param0 
 * @returns 
 */
export const PMMapleft = ({
    dataList, onClick
}) => {
    return (
        <div className={"pm-control"} >
            {
                dataList.map((item, num) => {
                    return (
                        <div
                            onClick={() => { onClick(num) }}
                            style={{
                                left: item.left,
                                background: item.status && `#0930EE`,
                                color: item.status ? "#fff" : "#9fa0a2",
                                fontSize: item.status && "23px"
                            }}
                        >{item.name}</div>
                    )
                })
            }

        </div>
    )
}


export const MaskBox = () => {
    return (
        <div className="by-mask"></div>
    )
}

/**
 * 3d场景下的操作面板
 * @returns 
 */
export const Box3D = (
    { event, data }
) => {
    return (
        <div className={"by-3d-box"}>
            {data.map((item, num) => <img src={item.url} onClick={() => event(num)} alt="" />)}
        </div>
    )
}


